<template>
  <Modal width="45" :value="show" :title="title" @on-cancel='rightClose'>
    <Form ref="interfaceValidate" :model="interfaceForm" :rules="ruleInterfaceForm" :label-width="80">
      <FormItem label="接口名称" prop="name">
        <Input v-model="interfaceForm.name" placeholder="请输入"/>
      </FormItem>
      <FormItem label="所属模块" prop="product">
        <Select v-model="interfaceForm.product">
          <Option v-for="item in modules" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="请求URL" prop="url">
        <Input v-model="interfaceForm.url" placeholder="如: /mate/pro/user/login">
          <Select v-model="interfaceForm.method" slot="prepend" style="width: 80px">
            <Option v-for="item in methodList" :value="item" :key="item">{{ item }}</Option>
          </Select>
        </Input>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button @click="cancel">取消</Button>
      <Button type="primary" @click="ok">确定</Button>
    </div>
  </Modal>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
import {apiAdd, apiDetail, apiEdit, modules} from "@/utils/api";

const methodList = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'];

export default {
  name: "interfaceModal",
  props: {
    show: Boolean,
    title: String,
    edit: Boolean,
    id: Number
  },
  components: {
    vueJsonEditor
  },
  computed: {
    selectProject: {
      get() {
        return this.$store.state.selectProject;
      },
      set(value) {
        this.$store.commit("updateSelectProject", value)
      }
    }
  },
  watch:{
    selectProject(newVal, oldVal) {
      this.interfaceForm.name = "";
      this.interfaceForm.product = "";
      this.interfaceForm.url = "";
      this.interfaceForm.method = "GET";
    },
    'show':{
      handler(v){
        if (v){
          this.handleGetModules();
        }
      }
    },
    'edit':{
      handler(v){
        if (v){
          apiDetail(this.id).then(res=>{
            this.interfaceForm.name = res.data.data.interface.name;
            this.interfaceForm.product = res.data.data.interface.product;
            this.interfaceForm.url = res.data.data.interface.url;
            this.interfaceForm.method = res.data.data.interface.method;
          })
        }
      }
    }
  },
  data() {
    return {
      developes: [],
      testers: [],
      modules:[],
      methodList,
      interfaceForm: {
        name: "",
        product: undefined,
        url: "",
        method: "GET",
      },
      ruleInterfaceForm: {
        name: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],
        product: [
          {required: true, message: '请选择', trigger: 'change', type: 'number'}
        ],
        url: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    ok() {
      this.$refs['interfaceValidate'].validate((valid) => {
        if (valid) {
          if (!this.edit){
            const obj = {
              ...this.interfaceForm,
           }
           console.log(obj)
           apiAdd(obj).then(res => {
            if (res.data.result === 1) {
              this.$Message.success("接口创建成功!")
              this.cancel()
              this.handleRefresh()
            }
           })
          }else {
            console.log(this.interfaceForm)
            console.log(this.id)
            this.interfaceForm.id = this.id;
            apiEdit(this.interfaceForm).then(res => {
              if (res.data.result === 1) {
                this.$Message.success("编辑成功!");
                this.cancel();
                this.handleRefresh()
              }
            })
          }
        }else {
          this.visible = true
        }
      })
    },
    rightClose() {
      this.$emit("closeModal", false);
    },
    cancel() {
      this.$emit("closeModal", false);
      this.interfaceForm.name = "";
      this.interfaceForm.product = "";
      this.interfaceForm.url = "";
      this.interfaceForm.method = "GET";
    },
    handleGetModules(){
      const id = parseInt(localStorage.getItem("project"));
      modules(id).then(res=>{
        this.modules = res.data.data.list;
      })
    },
    handleRefresh(){
      this.$emit("query", false);
    }
  }
}
</script>

<style scoped>

</style>
